﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>冉野的聊天室</title>
<link rel="icon" href="../img/chat.ico" type="/image/x-icon" />
<link rel="stylesheet" type="text/css" href="../css/chatroom.css">
<link rel="stylesheet" type="text/css" href="../css/common/layui.css">
<link rel="stylesheet" type="text/css" href="../css/common/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../css/common/fileinput.min.css">
</head>
<body>
<div class="qqBox">
    <div class="BoxHead">
        <div class="headImg">
            <img id="avatarUrl" src=""/>
        </div>
        <div id="username" class="internetName"></div>
        <button class="close logout" onclick="logout()">&times;</button>
    </div>
    <div class="context">
        <div class="conLeft">
            <ul>
                
            </ul>
        </div>
        <div class="conRight">
            <div class="Righthead">
                <div class="headName"></div>
            </div>
            <div class="RightCont">
                <ul class="newsList-temp"></ul>
                <ul class="newsList">
                
                </ul>
            </div>
            <div class="RightFoot">
                <div class="emjon">
                    <ul>
                        <li><img src="../img/emoji/ji.png"></li>
                        <li><img src="../img/emoji/buxie.png"></li>
                        <li><img src="../img/emoji/qq.png"></li>
                        <li><img src="../img/emoji/bb.png"></li>
                        <li><img src="../img/emoji/tx.png"></li>
                        <li><img src="../img/emoji/aoman.png"></li>
                        <li><img src="../img/emoji/zaijian.png"></li>
                        <li><img src="../img/emoji/diaoxie.png"></li>
                        <li><img src="../img/emoji/sd.png"></li>
                        <li><img src="../img/emoji/jiyou.png"></li>
                        <li><img src="../img/emoji/gy.png"></li>
                        <li><img src="../img/emoji/de.png"></li>
                        <li><img src="../img/emoji/dad.png"></li>
                        <li><img src="../img/emoji/kouzhao.png"></li>
                        <li><img src="../img/emoji/kelian.png"></li>
                        <li><img src="../img/emoji/zhh.png"></li>
                        <li><img src="../img/emoji/yhh.png"></li>
                        <li><img src="../img/emoji/heshi.png"></li>
                        <li><img src="../img/emoji/tu.png"></li>
                        <li><img src="../img/emoji/tushetou.png"></li>
                        <li><img src="../img/emoji/emoji_10.png"></li>
                        <li><img src="../img/emoji/zm.png"></li>
                    </ul>
                </div>
                <div class="footTop">
                    <ul>
                        <li class="ExP">
                            <img src="../img/emoji.jpg">
                        </li>
                        <li class="file-upload">
                            <a data-toggle="modal" data-target="#upload-modal" data-backdrop="static">
                                <img  src="../img/upload.jpg">
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="inputBox">
                    <input id="toUserId" type="hidden">
                    <input id="toGroupId" type="hidden">
                    <textarea id="dope" style="width: 99%;height: 75px; border: none;outline: none;" name="" rows="" cols=""></textarea>
                    <button title="按下回车可发送" class="sendBtn">发送</button>
                </div>
            </div>
        </div>
    </div>
    
    <div class="modal fade" id="upload-modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">&times;</button>
                    <h3 class="modal-title text-primary">文件上传</h3>
                </div>
                <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">选择文件</label>
                        <div class="col-sm-9">
                            <input type="file" name="file"
                                class="col-sm-9 myfile" />
                            <p class="help-block">注意：文件大小不超过30M，有效期为7天</p>
                        </div>
                    </div>
                </form>
                </div>
                <div class="modal-footer">
                        <button id="upload-cancel" class="btn btn-sm btn-muted" data-dismiss="modal">
                        <i class="glyphicon glyphicon-remove"></i> 取消
                    </button>
                </div>
            </div>
        </div>
    </div>
    
</div>


<script type="text/javascript" src="../js/common/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../js/common/jquery.actual.min.js"></script>
<script type="text/javascript" src="../js/common/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/common/fileinput.min.js"></script>
<script type="text/javascript" src="../js/common/zh.js"></script>
<script type="text/javascript" src="../js/chatroom.js"></script>
<script type="text/javascript">
    var userId;
    var socket;   
    var sentMessageMap;
    
    setUserInfo();
    setSentMessageMap();

    if(!window.WebSocket){  
        window.WebSocket = window.MozWebSocket;  
    }  
    if(window.WebSocket){
        socket = new WebSocket("ws://localhost:1235");
        socket.onmessage = function(event){  
            var json = JSON.parse(event.data);
            //var json = event.data;
            console.log("当前json数据为：" + json)
            // {msg=ok, data={type=REGISTER}, status=200}
            if (json.status === 200) {
                var type = json.data.type;
                console.log("收到一条新信息，类型为：" + type);
                switch(type) {
                    case "REGISTER":
                        ws.registerReceive();
                        break;
                    case "SINGLE_SENDING":
                        ws.singleReceive(json.data);
                        break;
                    case "GROUP_SENDING":   
                        ws.groupReceive(json.data);
                        break;
                    case "FILE_MSG_SINGLE_SENDING":
                        ws.fileMsgSingleRecieve(json.data);
                        break;
                    case "FILE_MSG_GROUP_SENDING":
                        ws.fileMsgGroupRecieve(json.data);
                        break;
                    default:
                        console.log("不正确的类型！");
                }
            } else {
                //alert(json.msg);
                console.log(json.msg);
            }
        };  
     
        // 连接成功1秒后，将用户信息注册到服务器在线用户表
        socket.onopen = setTimeout(function(event){ 
              console.log("WebSocket已成功连接！");  
              ws.register();
        }, 1000)  
     
        socket.onclose = function(event){  
              console.log("WebSocket已关闭...");  
        };  
    } else {  
          alert("您的浏览器不支持WebSocket！");  
    }
    
</script>


</body>
</html>
